<template>
    <div class="storeInfo">
        <div class="head">    
            <p class="headTxt" style="color:red;font-weight:900">VIP-{{params.title}}:消费记录</p>            
            <el-form class="headForm">
                <el-button type="danger" @click="back" >返回</el-button> 
            </el-form>  
        </div> 
        <!-- table -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 时间	消费金额	折扣金额	门店	消费属性	操作 -->
                <el-table-column prop="create_time" label="时间" fixed></el-table-column>
                <el-table-column prop="order_price" label="消费金额"> </el-table-column>
                <el-table-column prop="discount_price" label="折扣金额" width="200"></el-table-column>
                <el-table-column prop="title" label="门店"></el-table-column>
                <el-table-column prop="consumer_type_cn" label="消费属性"></el-table-column>               
                <el-table-column  label="操作" prop="price_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i><i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>

                </el-table-column>
                <el-table-column label="操作"  v-else>/</el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
<!-- 消费详情 -->
        <el-dialog title="消费详情" :visible.sync="detailShow" class="business" style="padding:0 10px">
            <div class="part1">
                <p class="labelL">商品信息</p>
                <div class="txtR">
                    <ul v-if="detailData.fee_items.items_detail.length != 0">

                        <li v-for="(itemsi,i) in detailData.fee_items.items_detail" :key="i">
                            {{itemsi.item_name}}*{{itemsi.quantity}}&nbsp;&nbsp;&nbsp;&nbsp;￥{{itemsi.member_price}}
                            <ol v-if="itemsi.items_detail.length != 0">
                                <li v-for="itemol in itemsi.items_detail" :key="itemol.item_id">{{itemol.item_name}}*{{itemol.quantity}}</li>
                            </ol>
                        </li>
                        
                    </ul>
                    <div v-if="typeof(detailData.fee_items.time_detail) == 'object'">
                       <!-- length: {{detailData.fee_items.time_detail.detail.length}} -->
                        <ul >
                            <li v-for="(detail,d) in detailData.fee_items.time_detail.detail" :key="d">{{detail.title}}￥{{detail.member_price}}</li>
                        </ul>
                    </div>
                    
                </div>
            </div>            
            <div class="part1">
                <p class="labelL">订单号</p>
                <p class="txtR">{{detailData.order_id}}</p>
            </div>
            <div class="part1">
                <p class="labelL">订单金额</p>
                <p class="txtR">{{detailData.order_price}}</p>
            </div>
            <div class="part1">
                <p class="labelL">vip卡实付</p>
                <p class="txtR">{{detailData.total_price}}</p>
            </div>
            <div class="part1">
                <p class="labelL">创建时间</p>
                <p class="txtR">{{detailData.create_time}}</p>
            </div>
        </el-dialog>
    </div>
  
</template>
<style lang="scss" scoped>
.part1{
    display: flex;
    flex-direction:row;
    font-size:14px;
    line-height: 30px;
    margin:5px 0;
    .labelL{
        width:120px;
        margin-right:15px;
        text-align:right;
        font-size:16px;
        font-weight: 600;
        color: #666
    }
    .txtR{
        flex-grow: 1;
    }
}
</style>
<style>
.setWidth{width:140px !important}
</style>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
export default {
  data () {
    return {
        tableData:[],
        total:50,
        size:20,
        pageNum:1,
        params:{
            page:1,
            size:20,
        },
        limitList:[
            {url:"consumerDetail",name:'消费详情'}
        ],
        detailShow:false,
        detailData:{
            fee_items:{
                items_detail:[],
                time_detail:[{detail:[]}]
            }
        },
    }
  },
   mounted(){
        let that = this;
        console.log(that.$route.params)
        if(that.$route.params.card_id == undefined){
            that.back()
        }
        that.params.card_id = that.$route.params.card_id
        that.params.title = that.$route.params.title;
        if(that.$route.params.card_type != undefined){
           that.params.card_type = that.$route.params.card_type
        }
        that.getList()
  },
  methods:{
    back(){
        this.$router.push('/customer')
    },
    changePage(val){
        let that = this;
        that.pageNum = val;
        that.form.page = that.pageNum;
        that.getList()
    },
    theClick(url,a){
        let that = this;
        if(url == 'consumerDetail'){
            that.detailData = a;
            that.detailShow = true;    
        }
        
    },
    getList(){
        let that = this;
        abc.get(that,potUrl.consumerlist,that.params,(res)=>{
            console.log(that.detailData)
            let obj = res.data.list;
            // obj.map((item,i)=>{
            //     console.log(item)
            //     if(item.fee_items.time_detail.length == 0){
            //         item.fee_items.time_detail.push({detail:[]})
            //     }
            //     console.log('item',item)
            // })
            that.tableData = obj
            that.total = res.data.total;
        })//列表
    }
  }
}
</script>
